<template>
  <div class="cell-container">
    <el-table v-show="isMounted" border ref="parentTable" :data="tableData" :span-method="spanMethodOfParent" :header-cell-style="{border: '2px solid #ccc'}" :cell-style="cellStyle" @header-dragend="headerDragend">
      <el-table-column label="序号" type="index" width="60"></el-table-column>
      <el-table-column label="资源方" prop="resourceName" min-width="140" show-overflow-tooltip></el-table-column>
      <el-table-column label="计划周期" prop="planCycle" min-width="140" show-overflow-tooltip></el-table-column>
      <!-- 在父Table的输气场站单元格中嵌套子Table -->
      <el-table-column label="输气站场" prop="column_4" width="126" :class-name="'cell-column'">
        <template slot-scope="scope">
          <el-table :data="scope.row.escalationDeliverVOList" :height="scope.row.childrenTableHeight" :ref="`childrenTable${scope.$index}`" :show-header="false" class="children-table">
            <el-table-column label="输气站场" prop="deliverName" :width="deliverNameWidth" show-overflow-tooltip></el-table-column>
            <el-table-column label="日指定量" prop="gasNum" :width="gasNumWidth" show-overflow-tooltip></el-table-column>
            <el-table-column label="计划备注" prop="reportDesc" :width="reportDescWidth" show-overflow-tooltip></el-table-column>
            <el-table-column label="日批复量" prop="approvalGasNum" :width="approvalGasNumWidth" show-overflow-tooltip></el-table-column>
            <el-table-column label="上报状态" prop="reportReviewStatus" :width="reportReviewStatusWidth" show-overflow-tooltip></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <!-- 下面父Table中的列，用于父Table表头显示，不用设置prop属性 -->
      <el-table-column label="日指定量" width="126" prop="column_5"></el-table-column>
      <el-table-column label="计划备注" width="126" prop="column_6"></el-table-column>
      <el-table-column label="日批复量" width="126" prop="column_7"></el-table-column>
      <el-table-column label="上报状态" width="126" prop="column_8"></el-table-column>
      <el-table-column label="参考">
        <template>
          <el-button type="text">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="opt">
        <template>
          <el-button type="text">上报</el-button>
          <el-button type="text">暂存</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          resourceName: "山西恒欣",
          planCycle: "11/25 13:00",
          escalationDeliverVOList: [{
            deliverName: "中石化胶州",
            gasNum: "10",
            reportDesc: "--",
            approvalGasNum: "-",
            reportReviewStatus: "审批中"
          }]
        },
        {
          resourceName: "山西恒欣",
          planCycle: "11/25 13:00 ~ 11/26 13:00",
          escalationDeliverVOList: [{
            deliverName: "中石化胶州",
            gasNum: "10",
            reportDesc: "--",
            approvalGasNum: "-",
            reportReviewStatus: "审批中"
          }, {
            deliverName: "中石化崂山",
            gasNum: "11",
            reportDesc: "--",
            approvalGasNum: "-",
            reportReviewStatus: "审批通过"
          }, {
            deliverName: "中石油",
            gasNum: "12",
            reportDesc: "--",
            approvalGasNum: "-",
            reportReviewStatus: "审批通过"
          }]
        }
      ],
      deliverNameWidth: 126,
      gasNumWidth: 126,
      reportDescWidth: 126,
      approvalGasNumWidth: 126,
      reportReviewStatusWidth: 126,
      isMounted: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.tableData.forEach((item, index) => {
        item.childrenTableHeight = this.$refs['parentTable'].$refs.bodyWrapper.children[0].children[1].children[index].children[0].clientHeight+'px';
      })
      console.log('tableData', this.tableData)
    })
    this.isMounted = true
  },
  methods: {
    // 单元格的 style 的回调方法
    cellStyle({ columnIndex }) {
      if (columnIndex === 3) {
        return `padding: 0 0;`;
      } else {
        return ''
      }
    },
    headerDragend(newWidth, oldWidth, column) {
      // console.log(newWidth, oldWidth, column, event);
      switch (column.property) {
        case 'column_4':
          this.deliverNameWidth = newWidth
          break;
        case 'column_5':
          this.gasNumWidth = newWidth
          break;
        case 'column_6':
          this.reportDescWidth = newWidth
          break;
        case 'column_7':
          this.approvalGasNumWidth = newWidth
          break;
        case 'column_8':
          this.reportReviewStatusWidth = newWidth
          break;
        default:
          break;
      }
    },
    // 父Table列合并规则
    spanMethodOfParent({ columnIndex }) {
      // console.log(row, column, rowIndex);
      // 从父Table的第3列开始，合并之后的5列（包含第3列），将5列合同成一个单元格，容纳子Table
      if (columnIndex === 3) {
        return [1, 5]
      }
      // 隐藏父Table中的第3列到第7列
      if (columnIndex > 3 && columnIndex < 8) {
        return [0, 0]
      }
    },
  }
}
</script>
<style lang="less" scoped>
.cell-container {
  width: 1200px;
  margin: 50px auto;
}
/deep/ .children-table .el-table__body {
  height: 100%;
}
/deep/ .cell-column .cell {
  border-right: 0!important;
  border-bottom: 0!important;
  padding: 0 0 !important;
}
/deep/ .cell-column .el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: hidden !important;
}
</style>